﻿@{
    Layout = "~/Views/Shared/_detail.cshtml";
    
    if (false)
    {
        <script src="~/LiberUI/Scripts/jquery.js"></script>
        <script src="~/LiberUI/Scripts/LiberUI.Base.js"></script>
        <script src="~/LiberUI/Scripts/LiberUI.js"></script>
        <script src="~/LiberUI/Scripts/LiberUI.Action.js"></script>
    }
    
}
<title>采购-收货</title>

<link href="/SiteUI/Purchase/OrderDetail.css" rel="stylesheet" />


<div class="row" id="orderHead">
    <div class="col-lg-4">
        <h4>交易编号：<strong id="oh-id">00001</strong></h4>
    </div>
    <div class="col-lg-4">
        <h4>总金额：<strong id="oh-amount"></strong></h4>
    </div>
    <div class="col-lg-4">
        <h4>状态:<span id="oh-status" class="Pendding"><i>订单状态</i></span></h4>
    </div>
    <div class="col-lg-12">
        <div class="row" id="orderStatusEx">
            <div class="col-lg-4">
                <h5>交付进度</h5>
                <div id="orderDelivery">
                    -
                </div>
            </div>
            <div class="col-lg-4">
                <h5>执行进度</h5>
                <div id="orderProcess">
                    -
                </div>
            </div>
            <div class="col-lg-4">
                <h5>付款进度</h5>
                <div id="orderPay">
                    -
                </div>
            </div>
        </div>
    </div>
</div>

<!--基于TODO模式的订单操作区域-->
<div id="tradeAction" class="row" obj-auth="true" obj-org="client_deptidstr" obj-action="Trade|Order|View">
    <div class="todoItem ConfirmOrder Active">
        <span class="todoTip">供应商还没有确认此订单，<a class="LinkTo" id="btnRemindSaler">点这里</a>提醒他</span>
    </div>
    <div class="todoItem ConfirmOrder Completed">
        <span class="todoTip">供应商已经确认此订单</span>
    </div>
</div>

<!--订单详情-->
<div class="InfoSection row expand">
    <div class="InfoSectionTitle">
        交易信息
        <i class="soicon "></i>
    </div>
    <div class="InfoSectionBody col-lg-12" id="tradeInfo">
        <div class="row ti-head">
            <div class="col-lg-4">
                <h5>供应商信息</h5>
            </div>
            <div class="col-lg-4">
                <h5>交付信息</h5>
            </div>
            <div class="col-lg-4">
                <h5>支付和发票信息</h5>
            </div>
        </div>
        <div class="row ti-body">
            <div class="col-lg-4">
                <div class="DataField">
                    <span class="df-title">供&nbsp;&nbsp;应&nbsp;&nbsp;商：</span>
                    {{#if(d.supplier_realname){ }}
                    <span class="df-value"><a href="#">{{d.supplier_realname}}</a></span>
                    {{#}else{ }}
                    <span class="df-value"><a href="#">{{d.src_supplier}}</a></span>
                    {{#} }}
                </div>
                <div class="DataField">
                    <span class="df-title">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>
                    {{#if(d.saler_realname){ }}
                    <span class="df-value"><a href="#" class="People certificated">{{d.saler_realname}}</a></span>
                    {{#}else{ }}
                    <span class="df-value"><a href="#" class="People no-certificated">{{d.src_saler}}</a></span>
                    {{#} }}
                </div>
                <div class="DataField">
                    <span class="df-title">联系方式：</span>
                    <span class="df-value">{{d.saler_phone}}</span>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="DataField">
                    <span class="df-title">收&nbsp;&nbsp;货&nbsp;&nbsp;人：</span>
                    <span class="df-value">
                        <span>{{d.consignee_displayname}}</span>
                    </span>
               </div>
                <div class="DataField">
                    <span class="df-title">交付方式：</span>
                    <span class="df-value">{{d.deliverymode}}</span>
                </div>
                <div class="DataField">
                    <span class="df-title">送货地址：</span>
                    <span class="df-value">{{d.src_dlvaddress}}</span>
                </div>
                <div class="DataField">
                    <span class="df-title">送货时间：</span>
                    {{#if(d._urgent){ }}
                    <span class="df-value urgent" title="交货日期已临近，请注意跟进">{{d._dlvDate}}<i class="icon-erroroutline"></i></span>
                    {{#}else{ }}
                    <span class="df-value">{{d._dlvDate}}</span>
                    {{#} }}
                </div>
                <div class="DataField">
                    <span class="df-title">质保条件</span>
                    <span class="df-value">{{d.qualityguarantee}}</span>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="DataField">
                    <span class="df-title">支付方式：</span>
                    <span class="df-value">{{d.settlement}}</span>
                </div>
                <div class="DataField">
                    <span class="df-title">发票抬头：</span>
                    <span class="df-value">{{d.invoiceheading}}</span>
                </div>
                <div class="DataField">
                    <span class="df-title">发票类型：</span>
                    <span class="df-value">{{d.invoicetype}}</span>
                </div>
                <div class="DataField">
                    <span class="df-title">税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率：</span>
                    <span class="df-value">{{d.taxrate}}</span>
                </div>
                <div class="DataField">
                    <span class="df-title">发票内容：</span>
                    <span class="df-value">{{d.invoicemx}}</span>
                </div>
            </div>         
        </div>
        <div class="row">
            <h5>其他信息</h5>
            {{#if(d.src_orderserial){ }}
            <div class="DataField">
                <span class="df-title">内部订单：</span>
                <span class="df-value">{{d.src_orderserial}}{{d.src_orderversion}}</span>
            </div>
            {{#} }}
            <div class="DataField">
                <span class="df-title">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                <span class="df-value">{{d.memo}}</span>
            </div>
        </div>
    </div>
</div>

<!--订单明细-->
<span id="chkGridStyle">启用现代列表样式</span>
<br />
<div class="InfoSection row expand" id="orderItems">
    <div class="InfoSectionTitle">
        商品明细
        <i class="soicon"></i>
    </div>

    <div class="InfoSectionBody">
        <div class="gridtable classicStyle">
            <div class="grid-row headrow">
                <div class="grid-col" style="width:15%">编号</div>
                <div class="grid-col" style="width:10%">品牌</div>
                <div class="grid-col" style="width:15%">名称</div>
                <div class="grid-col" style="width:10%">型号</div>
                <div class="grid-col" style="width:25%">规格</div>
                <div class="grid-col" style="width:10%">数量</div>
                <div class="grid-col" style="width:7%">单价</div>
                <div class="grid-col end" style="width:7%">金额</div>
            </div>
            <div class="grid-body">
                <div class="grid-row order-item-tpl">
                    <div class="grid-col order-item-code" style="width:15%"></div>
                    <div class="grid-col order-item-brand" style="width:10%"></div>
                    <div class="grid-col order-item-product" style="width:15%"></div>
                    <div class="grid-col order-item-model" style="width:10%"></div>
                    <div class="grid-col order-item-specification" style="width:25%"></div>
                    <div class="grid-col order-item-count" style="width:10%"></div>
                    <div class="grid-col order-item-price" style="width:7%"></div>
                    <div class="grid-col end order-item-amount" style="width:7%"></div>
                </div>
            </div>
        </div>
        <div class="gridtable modenStyle">
            <div class="grid-row headrow">
                <div class="grid-col" style="width:25%">产品</div>
                <div class="grid-col" style="width:35%">型号&规格</div>
                <div class="grid-col" style="width:15%">数量</div>
                <div class="grid-col" style="width:12.5%">单价</div>
                <div class="grid-col end" style="width:12.5%">金额</div>
            </div>
            <div class="grid-body">
                <div class="grid-row order-item-tpl">
                    <div class="grid-col order-item-product" style="width:25%"></div>
                    <div class="grid-col order-item-describe" style="width:35%"></div>
                    <div class="grid-col order-item-count" style="width:15%"></div>
                    <div class="grid-col order-item-price" style="width:12.5%"></div>
                    <div class="grid-col end order-item-amount" style="width:12.5%"></div>
                </div>
            </div>
        </div>
        <div class="order-summy">
            <div id="order-summy-count"><strong>商品数量：</strong><span></span></div>
            <br />
            <div id="order-summy-amount"><strong>商品总价：</strong><span></span></div>
            <br />
            <div id="order-summy-dlvfee"><strong>运费：</strong><span></span></div>
            <br />
            <div id="order-summy-dicount"><strong>折扣：</strong><span></span></div>
            <br />
            <div id="order-summy-pay"><strong>应收总额：</strong><span></span></div>
        </div>
    </div>
</div>


<!--核心功能，全视角交易跟踪-->
@*<div class="InfoSection row" id="tradeTrace">
    <div class="InfoSectionTitle">
        交易跟踪
        <i class="soicon "></i>
    </div>
    <div class="InfoSectionBody">

    </div>
</div>*@

<script src="/LiberUI/Scripts/laytpl.js"></script>
<script src="/SiteUI/res_sobiz.js"></script>
<script>
    var order = {}
    var ViewOD = {
        tplTradeInfo:null,
        GetOrderEnd: function (rtn) {
            if (rtn.IsPositive) {
                order = rtn.Data;
                //#region 处理订单状态信息
                $("#oh-id").vl(order.idstr);

                $("#oh-amount").vl(order.amount.toThousands());

                $("#oh-status").addClass(order.status);
                $("#oh-status").vl("<i></i>"+res_sobiz.var.Purchase[order.status]);
                order.buyer_phone = order.buyer_phone || "-";
                order.buyer_email = order.buyer_email || "-";
                order._dlvDate = new Date(order.src_deliverydate || order.deliverydate).toString();
                order._urgent = daysBetween(new Date(order.src_deliverydate || order.deliverydate).toString(), new Date().toString()) < 5;
                order.consignee_displayname = order.src_consignee || order.consignee_realname;
                order.taxrate = order.taxrate + "%";
                //#endregion

                var ti = ViewOD.tplTradeInfo.render(order);              
                $("#tradeInfo").append(ti).fadeIn();

                //处理订单相关待办
                if (order.Todos) {
                    order.Todos.forEach(function (t) {
                        $("#tradeAction").find("." + t.todotype).filter("." + t.status).fadeIn();
                    });
                }

                ViewOD.renderOrderMX();
            }
        },
        onInsecClick: function (ev) {
            $(this).parent(".InfoSection").toggleClass("expand");
        },
        remindSaler: function (ev) {
            if (order) {
                $.getJSON("/Purchase/RemindSaler", { orderid: order.idstr });
                $("#tradeAction").children(".ConfirmOrder,.Active").vl("已发送提醒给供应商");
            }
        },
        renderOrderMX:function(){
            //#region 处理订单明细
            var am = 0;
            if (order.OrderMX) {
                //TODO:做成切换agileStyle
                var style = $.Cookie("ordermx_style");
                if (style && style == 'classic') {
                    $(".modenStyle").hide();
                    var tpl = $(".classicStyle").find(".order-item-tpl").eq(0);
                    var gridBody = $(".classicStyle").children(".grid-body");
                    if (gridBody.children(".order-item-tpl").length== 1) {
                        order.OrderMX.forEach(function (i) {
                            am += i.amount;
                            var row = tpl.clone();
                            var cols = row.children(".grid-col");
                            cols.eq(0).vl(i.src_code || i.idstr);
                            cols.eq(1).vl(i.brand);
                            cols.eq(2).vl(i.product);
                            cols.eq(3).vl(i.model);
                            cols.eq(4).vl(i.src_specification);
                            cols.eq(5).vl(i.count + "(" + i.unit + ")");
                            cols.eq(6).vl('￥' + i.price);
                            cols.eq(7).vl('￥' + i.amount);
                            row.appendTo(gridBody).show();
                        });
                        $("#order-summy-count>span").vl(order.OrderMX.length);
                        $("#order-summy-amount>span").vl('￥' + am);

                        //TODO:处理订单附加费用等信息
                        $("#order-summy-dlvfee>span").vl("-");
                        $("#order-summy-discount>span").vl("-");
                        $("#order-summy-pay>span").vl("￥" + am);
                    }
                    $(".classicStyle").fadeIn();
                }
                else {
                    $(".classicStyle").hide();
                    var tpl = $(".modenStyle").find(".order-item-tpl").eq(0);
                    var gridBody = $(".modenStyle").children(".grid-body");
                    if (gridBody.children(".order-item-tpl").length == 1) {
                        order.OrderMX.forEach(function (i) {
                            am += i.amount;
                            var row = tpl.clone();
                            var cols = row.children(".grid-col");
                            var b = $("<div class='DataField'>");
                            b.append($("<span class='df-title'>品牌：</span>"));
                            b.append($("<span class='df-value'>").vl(i.brand || '-'));

                            var p = $("<div class='DataField'>");
                            p.append($("<span class='df-title'>产品：</span>"));
                            p.append($("<span class='df-value'>").vl(i.product || '-'));

                            var c = $("<div class='DataField'>");
                            c.append($("<span class='df-title'>编码：</span>"));
                            c.append($("<span class='df-value'>").vl(i.src_code || '-'));

                            var m = $("<div class='DataField'>");
                            m.append($("<span class='df-title'>型号：</span>"));
                            m.append($("<span class='df-value'>").vl(i.model || '-'));

                            var s = $("<div class='DataField'>");
                            s.append($("<span class='df-title'>规格：</span>"));
                            s.append($("<span class='df-value'>").vl(i.src_specification || '-'));

                            cols.eq(0).append(b).append(p).append(c);
                            cols.eq(1).append(m).append(s);
                            cols.eq(2).vl(i.count + "(" + i.unit + ")");
                            cols.eq(3).vl('￥' + i.price);
                            cols.eq(4).vl('￥' + i.amount);
                            row.appendTo(gridBody).show();
                        });
                        $("#order-summy-count>span").vl(order.OrderMX.length);
                        $("#order-summy-amount>span").vl('￥' + am);

                        //TODO:处理订单附加费用等信息
                        $("#order-summy-dlvfee>span").vl("-");
                        $("#order-summy-discount>span").vl("-");
                        $("#order-summy-pay>span").vl("￥" + am);
                    }

                    $(".modenStyle").fadeIn();
                }
            }
            //#endregion
        },
        swithGridStyle: function (ev) {
            if (ev.Controller.vl() == 'unchecked') {
                $.Cookie("ordermx_style", "classic");
            }
            else {
                $.Cookie("ordermx_style", "moden");
            }
            ViewOD.renderOrderMX();
        }
    }

    $(function () {
        var oid = getUrlParam("oid");
        $.getJSON("/Purchase/GetOrder", { "oid": oid }, ViewOD.GetOrderEnd);

        $(".InfoSectionTitle").on("click", ViewOD.onInsecClick);
        ViewOD.tplTradeInfo = laytpl($("#tradeInfo")[0].innerHTML);
        $("#tradeInfo").vl("");

        new LiberUI.CheckBox("#chkGridStyle").on("valueChanged", ViewOD.swithGridStyle)
                                             .vl($.Cookie('ordermx_style') === 'moden' ? 'checked' : 'unchecked');

        $("#btnRemindSaler").on("click", ViewOD.remindSaler);
    })
</script>

